{extend name="public/base" /}
{block name="title"}个人首页{/block}
{block name="css"}
<link href="__PUBLIC__/static/inspinia/css/plugins/dropzone/dropzone-4.3.0.min.css" rel="stylesheet">
{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-4 m-b-lg">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>我的资料 </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content" style="padding:10px">

                    <p>昵称: {$user.nickname|default="未命名"}</p>
                    <p>邮箱: <a href="mailto:{$user.email}">{$user.email}</a></p>
                    <p>用户分组: {foreach $user.groups as $g}<span class="label label-primary">{$g.title}</span>{/foreach}</p>
                    <p>手机号: <a href="tel:{$user.mobile}">{$user.mobile|default=""}</a> </p>

                    <p>注册时间: {$user.register_time}</p>
                    <p>最后登录: {$user.last_login_time}</p>
                    <p>最后登录IP: {$user.last_login_ip}</p>
                    <a href="{:url('Person/profile')}" class="btn btn-sm btn-primary"> 修改资料</a>
                    <a href="{:url('Person/password')}" class="btn btn-sm btn-warning"> 修改密码</a>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>我发布的文章 </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content" style="padding:10px">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <tr>
                                <th><input type="checkbox" class="ajax-check-all" id="0"></th>
                                <th>ID</th>
                                <th>所属分类</th>
                                <th>标题</th>
                                <th>状态</th>
                                <th>发布时间</th>
                                <th>操作</th>
                            </tr>
                            {foreach name="articleList" item="vo"}
                            <tr>
                                <td><input type="checkbox" class="js-check" id="{$vo.id}"></td>
                                <td>{$vo.id}</td>
                                <td>
                                    {volist name="vo.categorys" id="categoryVo" empty="未分类"}
                                    {gt name="key" value="0"}<br>{/gt}<span class="label">{$categoryVo.title}</span>
                                    {/volist}
                                </td>
                                <td><a href="{:url(request()->module() . '/Article/viewArticle',['id'=>$vo['id']])}">{$vo.title}</a>{eq name="vo.is_top" value="1"}<span class="label label-info label-sm">顶</span>{/eq}</td>
                                <td>{$vo.status_text}</td>
                                <td>{$vo.post_time}</td>
                                <td>
                                    <a href="{:url(request()->module().'/Article/viewArticle',['id'=>$vo['id']])}"><button class="btn btn-xs btn-info" data-toggle="tooltip" data-placement="top" title="查看"><i class="fa fa-eye"></i> 查看</button></a>
                                    <a href="{:url(request()->module().'/Article/editArticle',['id'=>$vo['id']])}"><button class="btn btn-xs btn-warning" data-toggle="tooltip" data-placement="top" title="修改"><i class="fa fa-pencil"></i> 修改</button></a>
                                    {eq name="vo.status" value="0"}
                                    <a href="{:url(request()->module().'/Article/postArticle',['id'=>$vo['id']])}" class="ajax-a"><button class="btn btn-xs btn-primary" data-toggle="tooltip" data-placement="top" title="发布"><i class="fa fa-upload"></i> 发布</button></a>
                                    {/eq}
                                    
                                    {eq name="vo.is_top" value="0"}
                                    <button class="btn btn-xs btn-info ajax-btn" data-action="{:url(request()->module().'/Article/setTop',['id'=>$vo['id']])}"><i class="fa fa-arrow-circle-up"></i> 置顶</button>
                                    {else/}
                                    <button class="btn btn-xs btn-white ajax-btn" data-action="{:url(request()->module().'/Article/unsetTop',['id'=>$vo['id']])}"><i class="fa fa-arrow-circle-down"></i> 取消置顶</button>
                                    {/eq}
                                    <button class="btn btn-xs btn-danger ajax-btn-warning" data-action="{:url(request()->module().'/Article/deleteArticle',['id'=>$vo['id']])}"><i class="fa fa-remove"></i> 删除</button>
                                </td>
                            </tr>
                            {/foreach}
                            <tfoot>
                            <tr>
                                <td colspan="7">{$articleList->render()|raw}</td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="addAd" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <i class="fa fa-laptop modal-icon"></i>
                <h4 class="modal-title">添加头条</h4>
                <small class="font-bold">图片大小 1002*375</small>
            </div>
            <form class="ajax-form" action="{:url(request()->controller().'/upTop')}" method="post">
                <div class="modal-body">
                    <div class="form-group"><label>标题</label> <input type="text" name="title" required="" placeholder="标题" class="form-control" value=""></div>
                    <div class="form-group"><label>链接</label> <input type="text" name="url" required="" placeholder="链接" class="form-control" value="#" readonly=""></div>
                    <div class="form-group">
                        <label>上传图片</label>
                        <input type="hidden" name="image_id" id="image_id" value="{$info.image_id|default=''}">
                        <div class="dropzone needsclick dz-clickable" data-img-width="1002" data-img-height="375" data-tb-width="720" data-tb-height="361" data-input-name="image_id">
                            <div class="dz-message needsclick">
                                点击此处上传广告图 宽1002 高375<br>
                                <span class="note needsclick"></span>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="artId">
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<!-- 上传插件 -->
<script src="__PUBLIC__/static/inspinia/js/plugins/dropzone/dropzone-4.3.0.min.js"></script>
<script>
    $('.addHeadline').click(function(e){
        e.preventDefault();
        var $adModal = $('#addAd');
        var _this = $(this);
        $adModal.find('input[name="title"]').val(_this.data('title'));
        $adModal.find('input[name="url"]').val(_this.data('url'));
        $adModal.find('input[name="artId"]').val(_this.data('articleId'));
        $adModal.modal('show');
    });
    //图片上传
    Dropzone.autoDiscover = false;
    $(".dropzone").dropzone({
        url: "{:url('Image/upload')}",
        paramName: 'Filedata', //input的name
        maxFilesize: 5, // MB
        addRemoveLinks: true, //添加删除链接
        clickable: true, //预览图可点击
        maxFiles: 1, //最多上传文件数量
        acceptedFiles: '.jpg,.gif,.png,.jpeg', //允许上传的文件后缀
        // thumbnailWidth: 320,
        // thumbnailheight: 200,
        dictCancelUpload: '取消上传',
        dictRemoveFile: '删除图片',
        maxfilesexceeded: function(file) {
            layer.alert('超最大数量,请删除现有文件后再上传', {icon: 2, title: '上传失败'});
            file.previewElement.remove();
        },
        sending: function(file,xhr,formData) {
            var $element = $(this.element);
            //图片尺寸
            formData.append("imgWidth", $element.data('imgWidth'));
            formData.append("imgHeight", $element.data('imgHeight'));
            //缩略图尺寸
            formData.append("tbWidth", $element.data('tbWidth'));
            formData.append("tbHeight", $element.data('tbHeight'));
        },
        success: function(file,response) {
            if (response.code) {
                //将图片id填入input
                var imageId = response.data.id;
                var imageUrl = "__PUBLIC__"+response.data.image_url;
                $('#image_id').val(imageId);
                $('.dz-message').html('').append('<img src="'+imageUrl+'" style="border:1px solid #ccc;width:1002px;height:375px;max-width:100%">');
            } else {
                layer.alert(response.msg, {icon: 2, title: '上传失败'});
            }
        },
        complete: function(file) {
            if (this.options.maxFiles == 1) {
                this.removeFile(file);
            }
        },
        error: function(file,message) {
            //上传错误
            layer.alert(message, {icon: 2, title: '上传失败'});
            this.removeFile(file);
        }
    });
</script>
{/block}